<template>
  <div class="w-full max-w-4xl mx-auto">
    <!-- 文章头部 -->
    <header class="mb-8">
      <div class="mb-4">
        <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
          Vue.js
        </span>
        <span class="text-gray-500 text-sm ml-4">2024-01-15</span>
      </div>
      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
        Vue.js 开发技巧
      </h1>
      <p class="text-xl text-gray-600 mb-6">
        掌握 Vue.js 开发中的实用技巧和最佳实践，提升开发效率和代码质量
      </p>
      <div class="flex flex-wrap gap-2 mb-6">
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Vue.js</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">前端开发</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">最佳实践</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">开发技巧</span>
      </div>
      <div class="flex items-center text-gray-500 text-sm">
        <span>📖 阅读时间：8 分钟</span>
        <span class="mx-4">•</span>
        <span>👁️ 2,156 次阅读</span>
      </div>
    </header>

    <!-- 文章内容 -->
    <article class="prose prose-lg max-w-none">
      <!-- 引言 -->
      <div class="bg-green-50 border-l-4 border-green-400 p-6 mb-8">
        <p class="text-green-800 font-medium">
          Vue.js 作为现代前端框架的佼佼者，提供了丰富的功能和灵活的 API。
          本文将分享一些实用的开发技巧，帮助你更好地使用 Vue.js 进行开发。
        </p>
      </div>

      <!-- 目录 -->
      <div class="bg-gray-50 rounded-xl p-6 mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">📋 目录</h2>
        <ul class="space-y-2 text-gray-700">
          <li><a href="#composition" class="text-green-600 hover:text-green-800">1. 组合式 API 技巧</a></li>
          <li><a href="#performance" class="text-green-600 hover:text-green-800">2. 性能优化技巧</a></li>
          <li><a href="#reactivity" class="text-green-600 hover:text-green-800">3. 响应式系统技巧</a></li>
          <li><a href="#components" class="text-green-600 hover:text-green-800">4. 组件开发技巧</a></li>
          <li><a href="#directives" class="text-green-600 hover:text-green-800">5. 自定义指令技巧</a></li>
          <li><a href="#tools" class="text-green-600 hover:text-green-800">6. 开发工具技巧</a></li>
        </ul>
      </div>

      <!-- 1. 组合式 API 技巧 -->
      <section id="composition" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">1. 组合式 API 技巧</h2>

        <div class="space-y-8">
          <!-- 技巧1：组合函数 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🎯 技巧1：创建可复用的组合函数</h3>
            <p class="text-gray-700 mb-4">
              组合函数（Composables）是 Vue 3 中最重要的概念之一，它让我们能够提取和复用有状态的逻辑。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <h4 class="font-semibold text-gray-800 mb-3">useCounter 组合函数示例：</h4>
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const doubleCount = computed(() => count.value * 2)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return {
    count,
    doubleCount,
    increment,
    decrement,
    reset
  }
}</code></pre>

              <h4 class="font-semibold text-gray-800 mb-3 mt-6">在组件中使用：</h4>
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>&lt;template&gt;
  &lt;div&gt;
          &lt;p&gt;Count: \{\{ count \}\}&lt;/p&gt;
      &lt;p&gt;Double: \{\{ doubleCount \}\}&lt;/p&gt;
    &lt;button @click="increment"&gt;+&lt;/button&gt;
    &lt;button @click="decrement"&gt;-&lt;/button&gt;
    &lt;button @click="reset"&gt;Reset&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

// &lt;script setup&gt;
// 这里只是示例代码，实际使用时需要导入相应的组合函数
// import { useCounter } from '@/composables/useCounter'
// const { count, doubleCount, increment, decrement, reset } = useCounter(10)

// 示例数据
// const count = ref(10)
// const doubleCount = computed(() => count.value * 2)
// const increment = () => count.value++
// const decrement = () => count.value--
// const reset = () => count.value = 10
// &lt;/script&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧2：生命周期钩子 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⏰ 技巧2：生命周期钩子的最佳实践</h3>
            <p class="text-gray-700 mb-4">
              在组合式 API 中，生命周期钩子变得更加灵活和强大。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// &lt;script setup&gt;
import { onMounted, onUnmounted, onUpdated } from 'vue'

// 组件挂载后执行
onMounted(() => {
  console.log('组件已挂载')
  // 初始化第三方库
  // initThirdPartyLibrary()
})

// 组件更新后执行
onUpdated(() => {
  console.log('组件已更新')
})

// 组件卸载前执行
onUnmounted(() => {
  console.log('组件即将卸载')
  // 清理资源
  // cleanup()
})

// 异步生命周期
onMounted(async () => {
  try {
    // const data = await fetchData()
    console.log('异步初始化完成')
    // 处理数据
  } catch (error) {
    console.error('数据获取失败:', error)
  }
})
// &lt;/script&gt;</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 2. 性能优化技巧 -->
      <section id="performance" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">2. 性能优化技巧</h2>

        <div class="space-y-8">
          <!-- 技巧1：v-memo -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⚡ 技巧1：使用 v-memo 优化渲染</h3>
            <p class="text-gray-700 mb-4">
              v-memo 是 Vue 3.2+ 的新特性，可以缓存模板的一部分，避免不必要的重新渲染。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;!-- 只有当 user.id 或 user.name 改变时才重新渲染 --&gt;
    &lt;div v-memo="[user.id, user.name]"&gt;
      &lt;h3&gt;\{\{ user.name \}\}&lt;/h3&gt;
      &lt;p&gt;\{\{ user.email \}\}&lt;/p&gt;
      &lt;!-- 复杂的内容 --&gt;
    &lt;/div&gt;
    
    &lt;!-- 列表优化 --&gt;
    &lt;div v-for="item in items" :key="item.id" v-memo="[item.id, item.status]"&gt;
      &lt;ItemCard :item="item" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧2：shallowRef -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🔍 技巧2：使用 shallowRef 优化大对象</h3>
            <p class="text-gray-700 mb-4">
              对于大型对象，使用 shallowRef 可以避免深度响应式转换，提升性能。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// &lt;script setup&gt;
import { shallowRef } from 'vue'

// 大型对象，不需要深度响应式
const largeObject = shallowRef({
  // 包含大量嵌套数据
  data: { /* ... */ },
  config: { /* ... */ },
  metadata: { /* ... */ }
})

// 手动触发更新
const updateLargeObject = () => {
  largeObject.value = { ...largeObject.value, updated: true }
}
// &lt;/script&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧3：异步组件 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">📦 技巧3：异步组件和代码分割</h3>
            <p class="text-gray-700 mb-4">
              使用异步组件可以实现代码分割，减少初始包大小。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// &lt;script setup&gt;
import { defineAsyncComponent } from 'vue'

// 基础异步组件
const AsyncComponent = defineAsyncComponent(() =&gt; import('./HeavyComponent.vue'))

// 带加载状态的异步组件
const AsyncComponentWithLoading = defineAsyncComponent({
  loader: () =&gt; import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  onError(error, retry, fail, attempts) {
    if (attempts &lt;= 3) {
      retry()
    } else {
      fail()
    }
  }
})
// &lt;/script&gt;</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 3. 响应式系统技巧 -->
      <section id="reactivity" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">3. 响应式系统技巧</h2>

        <div class="space-y-8">
          <!-- 技巧1：响应式数组操作 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🔄 技巧1：响应式数组操作</h3>
            <p class="text-gray-700 mb-4">
              Vue 3 的响应式系统对数组操作有很好的支持，但需要注意一些细节。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// &lt;script setup&gt;
import { ref, reactive } from 'vue'

// 使用 ref 的数组
const list = ref([1, 2, 3, 4, 5])

// ✅ 正确的数组操作
const addItem = () =&gt; {
  list.value.push(6) // 直接修改
}

const removeItem = (index) =&gt; {
  list.value.splice(index, 1) // 使用 splice
}

const updateItem = (index, value) =&gt; {
  list.value[index] = value // 直接赋值
}

// 使用 reactive 的数组
const reactiveList = reactive([1, 2, 3, 4, 5])

// ✅ 正确的操作
const addReactiveItem = () =&gt; {
  reactiveList.push(6)
}

// ❌ 避免的操作
const badUpdate = () =&gt; {
  // 这样不会触发响应式更新
  list.value = [...list.value, 6]
}
// &lt;/script&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧2：计算属性优化 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🧮 技巧2：计算属性的高级用法</h3>
            <p class="text-gray-700 mb-4">
              计算属性不仅可以缓存结果，还可以用于复杂的逻辑处理。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// &lt;script setup&gt;
import { ref, computed } from 'vue'

const todos = ref([
  { id: 1, text: '学习 Vue', done: false },
  { id: 2, text: '写代码', done: true },
  { id: 3, text: '看文档', done: false }
])

// 基础计算属性
const doneTodos = computed(() =&gt; 
  todos.value.filter(todo =&gt; todo.done)
)

const undoneTodos = computed(() =&gt; 
  todos.value.filter(todo =&gt; !todo.done)
)

// 带参数的计算属性（使用函数）
const getTodoById = computed(() =&gt; (id) =&gt; 
  todos.value.find(todo =&gt; todo.id === id)
)

// 可写的计算属性
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value) {
    const [first, last] = value.split(' ')
    firstName.value = first
    lastName.value = last
  }
})
// &lt;/script&gt;</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 4. 组件开发技巧 -->
      <section id="components" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">4. 组件开发技巧</h2>

        <div class="space-y-8">
          <!-- 技巧1：Props 验证 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">✅ 技巧1：Props 验证和默认值</h3>
            <p class="text-gray-700 mb-4">
              良好的 Props 验证可以提高组件的可维护性和可读性。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// &lt;script setup&gt;
import { defineProps, withDefaults } from 'vue'

// 基础 Props 定义
const props = defineProps({
  title: {
    type: String,
    required: true,
    validator: (value) =&gt; value.length &gt; 0
  },
  count: {
    type: Number,
    default: 0,
    validator: (value) =&gt; value &gt;= 0
  },
  items: {
    type: Array,
    default: () =&gt; []
  },
  config: {
    type: Object,
    default: () =&gt; ({})
  }
})

// 使用 withDefaults（TypeScript）
interface Props {
  title: string
  count?: number
  items?: string[]
}

const propsWithDefaults = withDefaults(defineProps&lt;Props&gt;(), {
  count: 0,
  items: () =&gt; []
})
// &lt;/script&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧2：事件处理 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">📡 技巧2：事件处理和 Emits</h3>
            <p class="text-gray-700 mb-4">
              正确的事件处理可以让组件之间的通信更加清晰。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;button @click="handleClick"&gt;点击我&lt;/button&gt;
    &lt;input @input="handleInput" @keyup.enter="handleEnter" /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { defineEmits } from 'vue'

// 定义事件
const emit = defineEmits({
  click: (value) =&gt; typeof value === 'string',
  input: (value) =&gt; typeof value === 'string',
  submit: null // 不需要验证
})

// 事件处理函数
const handleClick = () =&gt; {
  emit('click', '按钮被点击了')
}

const handleInput = (event) =&gt; {
  emit('input', event.target.value)
}

const handleEnter = () =&gt; {
  emit('submit')
}

// TypeScript 版本
const emitTS = defineEmits&lt;{
  click: [value: string]
  input: [value: string]
  submit: []
}&gt;()
&lt;/script&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧3：插槽技巧 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🎭 技巧3：高级插槽技巧</h3>
            <p class="text-gray-700 mb-4">
              插槽是 Vue 组件中非常强大的功能，可以实现灵活的组件组合。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>&lt;!-- 父组件 --&gt;
&lt;template&gt;
  &lt;Card&gt;
    &lt;template #header="{ title, subtitle }"&gt;
      &lt;h2&gt;\{\{ title \}\}&lt;/h2&gt;
      &lt;p&gt;\{\{ subtitle \}\}&lt;/p&gt;
    &lt;/template&gt;
    
    &lt;template #default&gt;
      &lt;p&gt;这是默认内容&lt;/p&gt;
    &lt;/template&gt;
    
    &lt;template #footer&gt;
      &lt;button&gt;操作按钮&lt;/button&gt;
    &lt;/template&gt;
  &lt;/Card&gt;
&lt;/template&gt;

&lt;!-- Card 组件 --&gt;
&lt;template&gt;
  &lt;div class="card"&gt;
    &lt;div class="card-header"&gt;
      &lt;slot name="header" :title="title" :subtitle="subtitle"&gt;
        &lt;h2&gt;\{\{ title \}\}&lt;/h2&gt;
      &lt;/slot&gt;
    &lt;/div&gt;
    
    &lt;div class="card-body"&gt;
      &lt;slot&gt;默认内容&lt;/slot&gt;
    &lt;/div&gt;
    
    &lt;div class="card-footer"&gt;
      &lt;slot name="footer"&gt;&lt;/slot&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
defineProps({
  title: String,
  subtitle: String
})
&lt;/script&gt;</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 5. 自定义指令技巧 -->
      <section id="directives" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">5. 自定义指令技巧</h2>

        <div class="space-y-8">
          <!-- 技巧1：基础指令 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🎯 技巧1：创建自定义指令</h3>
            <p class="text-gray-700 mb-4">
              自定义指令可以封装 DOM 操作，提供可复用的功能。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// directives/focus.js
export const focus = {
  mounted: (el) =&gt; el.focus(),
  updated: (el) =&gt; el.focus()
}

// directives/click-outside.js
export const clickOutside = {
  mounted(el, binding) {
    el._clickOutside = (event) =&gt; {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el._clickOutside)
  },
  unmounted(el) {
    document.removeEventListener('click', el._clickOutside)
  }
}

// 在组件中使用
&lt;script setup&gt;
import { focus, clickOutside } from '@/directives'

// 注册指令
const vFocus = focus
const vClickOutside = clickOutside
&lt;/script&gt;

&lt;template&gt;
  &lt;input v-focus /&gt;
  &lt;div v-click-outside="handleClickOutside"&gt;
    点击外部会触发事件
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
            </div>
          </div>

          <!-- 技巧2：高级指令 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🚀 技巧2：高级指令技巧</h3>
            <p class="text-gray-700 mb-4">
              高级指令可以处理复杂的交互和动画效果。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// directives/intersection-observer.js
export const intersectionObserver = {
  mounted(el, binding) {
    const observer = new IntersectionObserver((entries) =&gt; {
      entries.forEach(entry =&gt; {
        if (entry.isIntersecting) {
          binding.value(entry)
        }
      })
    })
    
    observer.observe(el)
    el._observer = observer
  },
  
  unmounted(el) {
    if (el._observer) {
      el._observer.disconnect()
    }
  }
}

// directives/debounce.js
export const debounce = {
  mounted(el, binding) {
    const delay = binding.value || 300
    let timeoutId
    
    el._debounceHandler = (...args) =&gt; {
      clearTimeout(timeoutId)
      timeoutId = setTimeout(() =&gt; {
        binding.arg(...args)
      }, delay)
    }
    
    el.addEventListener('input', el._debounceHandler)
  },
  
  unmounted(el) {
    el.removeEventListener('input', el._debounceHandler)
  }
}</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 6. 开发工具技巧 -->
      <section id="tools" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">6. 开发工具技巧</h2>

        <div class="space-y-8">
          <!-- 技巧1：Vue DevTools -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🔧 技巧1：Vue DevTools 使用技巧</h3>
            <p class="text-gray-700 mb-4">
              Vue DevTools 是调试 Vue 应用的最佳工具，掌握其高级功能可以大大提升开发效率。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <h4 class="font-semibold text-gray-800 mb-2">组件树调试</h4>
                  <ul class="text-sm text-gray-600 space-y-1">
                    <li>• 查看组件层级关系</li>
                    <li>• 检查 Props 和 Emits</li>
                    <li>• 监控组件生命周期</li>
                    <li>• 实时修改组件状态</li>
                  </ul>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-800 mb-2">性能分析</h4>
                  <ul class="text-sm text-gray-600 space-y-1">
                    <li>• 组件渲染时间</li>
                    <li>• 内存使用情况</li>
                    <li>• 事件追踪</li>
                    <li>• 性能瓶颈识别</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 技巧2：调试技巧 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🐛 技巧2：调试技巧</h3>
            <p class="text-gray-700 mb-4">
              掌握一些调试技巧可以快速定位和解决问题。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>&lt;script setup&gt;
import { nextTick, onErrorCaptured } from 'vue'

// 等待 DOM 更新
const updateDOM = async () =&gt; {
  // 修改数据
  count.value++
  
  // 等待 DOM 更新完成
  await nextTick()
  
  // 现在可以安全地操作 DOM
  console.log('DOM 已更新')
}

// 错误捕获
onErrorCaptured((error, instance, info) =&gt; {
  console.error('组件错误:', error)
  console.log('错误信息:', info)
  
  // 可以发送错误到监控服务
  // sendErrorToMonitoring(error)
  
  // 返回 false 阻止错误继续传播
  return false
})

// 调试响应式数据
const debugReactive = (obj) =&gt; {
  console.log('响应式对象:', obj)
  // console.log('原始值:', toRaw(obj))
}

// 在开发环境中启用调试
// if (import.meta.env.DEV) {
//   // 全局错误处理
//   window.addEventListener('error', (event) =&gt; {
//     console.error('全局错误:', event.error)
//   })
//   
//   // 未处理的 Promise 拒绝
//   window.addEventListener('unhandledrejection', (event) =&gt; {
//     console.error('未处理的 Promise 拒绝:', event.reason)
//   })
// }
&lt;/script&gt;</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 总结 -->
      <section class="mb-12">
        <div class="bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-xl p-8">
          <h2 class="text-3xl font-bold mb-4">总结</h2>
          <p class="text-lg opacity-90 mb-4">
            掌握这些 Vue.js 开发技巧可以显著提升你的开发效率和代码质量。
            记住，实践是最好的学习方式，多在实际项目中应用这些技巧。
          </p>
          <div class="flex flex-wrap gap-4">
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">组合式 API</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">性能优化</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">响应式系统</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">组件开发</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">自定义指令</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">调试技巧</span>
          </div>
        </div>
      </section>
    </article>

    <!-- 文章底部 -->
    <footer class="border-t pt-8 mt-12">
      <div class="flex flex-wrap justify-between items-center mb-6">
        <div class="flex items-center space-x-4">
          <button class="flex items-center space-x-2 text-gray-600 hover:text-green-600 transition-colors">
            <span>👍</span>
            <span>有用 (256)</span>
          </button>
          <button class="flex items-center space-x-2 text-gray-600 hover:text-green-600 transition-colors">
            <span>💬</span>
            <span>评论 (89)</span>
          </button>
          <button class="flex items-center space-x-2 text-gray-600 hover:text-green-600 transition-colors">
            <span>📤</span>
            <span>分享</span>
          </button>
        </div>
        <div class="flex items-center space-x-4">
          <span class="text-gray-500 text-sm">阅读时间：8 分钟</span>
          <span class="text-gray-500 text-sm">•</span>
          <span class="text-gray-500 text-sm">2,156 次阅读</span>
        </div>
      </div>

      <!-- 相关文章 -->
      <div class="bg-gray-50 rounded-xl p-6">
        <h3 class="text-xl font-semibold text-gray-800 mb-4">📚 相关文章</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <a href="#" class="block p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
            <h4 class="font-semibold text-gray-800 mb-2">Vue 3 组合式 API 完全指南</h4>
            <p class="text-gray-600 text-sm">深入理解 Vue 3 组合式 API 的使用方法和最佳实践</p>
          </a>
          <a href="#" class="block p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
            <h4 class="font-semibold text-gray-800 mb-2">Vue.js 性能优化实战</h4>
            <p class="text-gray-600 text-sm">从理论到实践，全面掌握 Vue.js 性能优化技巧</p>
          </a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
// 设置页面元数据
useHead({
  title: 'Vue.js 开发技巧 - 我的博客',
  meta: [
    { name: 'description', content: '掌握 Vue.js 开发中的实用技巧和最佳实践，提升开发效率和代码质量。' },
    { name: 'keywords', content: 'Vue.js, 前端开发, 最佳实践, 开发技巧, 组合式 API' }
  ]
})
</script>